<template>
    <div class="app-container">
      <el-form ref="form" :model="form" label-width="80px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="名称:" prop="paperName">
                {{form.paperName}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="5">
              <el-form-item label="时长:" prop="duration">
                {{form.duration}}分钟
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="总分:" prop="paperScore">
                {{form.paperScore}}
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="得分:" prop="totalScore">
                {{form.totalScore}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="18">
              <el-card>
                <el-row :key="index"  v-for="(group,index) in form.groups">
                  <el-row>
                    <el-col :span="24">
                      <el-form-item >
                        {{group.groupName}}
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row >
                    <el-form-item :label="(questonIndex+1)+'：'" :key="questonIndex" v-for="(question,questonIndex) in group.questions" style="margin-left:50px" >
                      <el-col :span="20">
                        <el-card> 
                          <a :id="'q'+index+'_'+(questonIndex)"></a>
                          <RecordQuestion :questionType="question.questionType" :question="question"/>
                        </el-card>
                      </el-col>
                    </el-form-item>
                  </el-row>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="评语:">
                      <el-input type="textarea" v-model="form.comment" class="question-option-content-input"   maxlength="200" show-word-limit/>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-card>
            </el-col>
            <el-col :span="6">
              <!--答题卡卡片-->
              <el-card>
                <div>
                  <p >答题卡</p>
                  <div class="question-card">
                    <span class="span-noanswer">未作答</span>
                    <span class="span-answer">已作答</span>
                  </div>
                </div>
                <!--答题卡-->
                <div class="question-card" :key="index"  v-for="(group,index) in form.groups">
                  <p>试题列表{{index+1}}</p>
                  <el-button style="margin-top: 10px;margin-left: 15px" size="mini"
                            :class="getQuestionClass(question)"
                            @click="scrollToQuetion(index,questionIndex)"
                            v-for="(question,questionIndex) in group.questions" :key="questionIndex">{{ questionIndex+1 }}
                  </el-button>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-form>
    </div>
  </template>
  
  <script>
  import {getExamDetail} from "@/api/paper/paper";
  import RecordQuestion from "../question/recordQuestion";
  
  export default {
    name: "Exam",
    components: { RecordQuestion },
    data() {
      return {
        // 遮罩层
        loading: true,
        // 表单参数
        form: {},
      };
    },
    created() {
      const paperId = this.$route.params && this.$route.params.id;
      if(paperId) {
        getExamDetail(paperId).then(response => {
          this.form = response.data;
          if(!this.form.groups){
            this.form.groups=[{ groupName:''}];
          }
          if(!this.form.grades){
            this.form.gradeUsers = [];
          }
        }); 
      }
    },
    methods: {
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      getQuestionClass(question){
        let questionClass = 'question-noanswer';
        let questionType = question.questionType;
        if(questionType=='0'||questionType=='1'||questionType=='11'){
          question.options.forEach(option => {
            if(option.answerFlag==true){
              questionClass = 'question-answer';
            }
          });
        }else if(questionType>='2'&&questionType<='6'){
          question.answers.forEach(answer => {
            if(answer.answer!==''){
              questionClass = 'question-answer';
            }
          });
        }else if(questionType=='7'){
          question.choices.forEach(choice => {
            if(choice.answer!==''){
              questionClass = 'question-answer';
            }
          });
        }else if(questionType=='8'||questionType=='9'){
          question.questions.forEach(question => {
          question.options.forEach(option=>{
            if(option.answerFlag==true){
              questionClass = 'question-answer';
            }
          })
          });
        }else if(questionType=='10'){
          if(question.answerFlag){
            questionClass = 'question-answer';
          }
        }
        return questionClass;
    },
    scrollToQuetion(index,questionIndex){
      let qIndex = 'q'+index+'_'+questionIndex;
      let question = document.getElementById(qIndex);
      if (question) {
        question.scrollIntoView({ behavior: 'smooth' });
      }
    },
    }
  };
  </script>
  